<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ空间时光轴效果</title>
    <link rel="stylesheet" type="text/css" href="QQzone.css"/>

</head>
<body>
<div id="Con">
    <dl>
        <dt><img src="images/my.jpg"/></dt>
        <dd>hello</dd>
    </dl>
    <div class="List">
        <ul>
            <li>
                <div class="bq">
                    <strong>8月14日</strong>
                    <img src="images/r.png" class="jt"/>
                    <span></span>
                </div>
                <div class="ListCon">
                    <img src="images/psb1.jpg" style="position:absolute;left:0px;top:0px;width:100%;height:100%;z-Index:-1; border-radius: 10px" />
                </div>
            </li>
            <li>
                <div class="bq">
                    <strong>8月14日</strong>
                    <img src="images/r.png" class="jt"/>
                    <span></span>
                </div>
                <div class="ListCon" >
                    <img src="images/psb2.png" style="position:absolute;left:0px;top:0px;width:100%;height:100%;z-Index:-1; border-radius: 10px"/>
                </div>
            </li>
            <li>
                <div class="bq">
                    <strong>8月14日</strong>
                    <img src="images/r.png" class="jt"/>
                    <span></span>
                </div>
                <div class="ListCon">
                    <img src="images/psb3.gif" style="position:absolute;left:0px;top:0px;width:100%;height:100%;z-Index:-1; border-radius: 10px"/>
                </div>
            </li>
            <li>
                <div class="bq">
                    <strong>8月14日</strong>
                    <img src="images/r.png" class="jt"/>
                    <span></span>
                </div>
                <div class="ListCon">
                    <img src="images/psb4.png" style="position:absolute;left:0px;top:0px;width:100%;height:100%;z-Index:-1; border-radius: 10px"/>
                </div>
            </li>
            <li>
                <div class="bq">
                    <strong>8月14日</strong>
                    <img src="images/r.png" class="jt"/>
                    <span></span>
                </div>
                <div class="ListCon">
                    <img src="images/psb5.jpg" style="position:absolute;left:0px;top:0px;width:100%;height:100%;z-Index:-1; border-radius: 10px"/>
                </div>
            </li>
            <li>
                <div class="bq">
                    <strong>8月14日</strong>
                    <img src="images/r.png" class="jt"/>
                    <span></span>
                </div>
                <div class="ListCon">
                    <img src="images/psb6.jpg" style="position:absolute;left:0px;top:0px;width:100%;height:100%;z-Index:-1; border-radius: 10px"/>
                </div>
            </li>
            <li>
                <div class="bq">
                    <strong>8月14日</strong>
                    <img src="images/r.png" class="jt"/>
                    <span></span>
                </div>
                <div class="ListCon">
                    <img src="images/psb7.jpg" style="position:absolute;left:0px;top:0px;width:100%;height:100%;z-Index:-1; border-radius: 10px"/>
                </div>
            </li>
            <li>
                <div class="bq">
                    <strong>8月14日</strong>
                    <img src="images/r.png" class="jt"/>
                    <span></span>
                </div>
                <div class="ListCon">
                    <img src="images/psb8.jpg" style="position:absolute;left:0px;top:0px;width:100%;height:100%;z-Index:-1; border-radius: 10px"/>
                </div>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    /**
     * 设计思路：每次滑动滚动条的时候，只加载在滚动条之前的li
     */
        $(".List ul li:lt(2)").show();                       //找到li序列号小于3的li显示出来，即0，1，2。加载前3个li
        $(window).scroll(function()
        {
            var _top = $(this).scrollTop()+ $(window).height() -800; //滚动条的高度 + 浏览器窗口高度 - 200
             console.log(_top);
            $(".List ul li").each(function()
            {
                var _index = $(this).index()+2;   //获取当前li的下标+2
                var _height = $(this).offset().top; //li与浏览器窗口顶部距离
                console.log(_height);
                if (_top < _height)
                {
                    $(".List ul li:lt("+ _index +")").show();
                    return false;
                }
            });
        });
</script>
</body>
</html>